app/components/Compare/FacetQuadrantChart.vue (1)

136-183: Extract the tooltip renderer out of config.

This computed now mixes chart options, export wiring, and a large HTML template string. Pulling the tooltip formatter into a helper (or small dedicated component) would keep the config declarative and make the metric layout much easier to test.

As per coding guidelines "Keep functions focused and manageable (generally under 50 lines)".

Also applies to: 249-320

app/components/Compare/FacetQuadrantChart.vue (2)

113-128: Consider avoiding object spread in map for slight efficiency gain.

Static analysis flags the spread operator in .map() as inefficient since it creates intermediate objects. For the typical small number of packages being compared, the impact is negligible, but if you wish to address the lint warning:

♻️ Suggested refactor to avoid spread

 const dataset = computed<VueUiQuadrantDatasetItem[]>(() => {
   return rawQuadrant.value.map((el: PackageQuadrantPoint) => {
-    return {
-      ...el,
-      fullname: el.name,
-      name: applyEllipsis(el.name, 20),
-      shape: 'circle',
-      color: isListedFramework(el.name) ? getFrameworkColor(el.name) : undefined,
-      series: [
-        {
-          name: applyEllipsis(el.name, 20),
-          x: el.x,
-          y: el.y,
-        },
-      ],
-    }
+    const item: VueUiQuadrantDatasetItem = {
+      id: el.id,
+      license: el.license,
+      name: applyEllipsis(el.name, 20),
+      fullname: el.name,
+      x: el.x,
+      y: el.y,
+      adoptionScore: el.adoptionScore,
+      efficiencyScore: el.efficiencyScore,
+      quadrant: el.quadrant,
+      metrics: el.metrics,
+      shape: 'circle',
+      color: isListedFramework(el.name) ? getFrameworkColor(el.name) : undefined,
+      series: [
+        {
+          name: applyEllipsis(el.name, 20),
+          x: el.x,
+          y: el.y,
+        },
+      ],
+    }
+    return item
   })
 })

---

287-316: Add fallback values for consistency and robustness.

Some metrics use ?? 0 fallbacks (lines 281, 285) while others don't. If datapoint?.category?.metrics is unexpectedly undefined, this could display "NaN%" or "undefined" in the tooltip.

♻️ Suggested fix to add consistent fallbacks

                 <div class="flex flex-row items-baseline gap-2">
                   <span class="text-fg-subtle">${$t('compare.quadrant_chart.label_freshness_score')}</span>
-                  <span class="text-fg text-sm">${Math.round(datapoint?.category?.metrics.freshnessPercent)}%</span>
+                  <span class="text-fg text-sm">${Math.round(datapoint?.category?.metrics?.freshnessPercent ?? 0)}%</span>
                 </div>

                 <div class="text-fg text-xs mt-4">${$t('compare.quadrant_chart.label_y_axis')}</div>
                 <div class="flex flex-row items-baseline gap-2">
                   <span class="text-fg-subtle">${$t('compare.facets.items.installSize.label')}</span>
-                  <span class="text-fg text-sm">${bytesFormatter.format(datapoint?.category?.metrics.installSize)}</span>
+                  <span class="text-fg text-sm">${bytesFormatter.format(datapoint?.category?.metrics?.installSize ?? 0)}</span>
                 </div>
                 <div class="flex flex-row items-baseline gap-2">
                   <span class="text-fg-subtle">${$t('compare.facets.items.packageSize.label')}</span>
-                  <span class="text-fg text-sm">${bytesFormatter.format(datapoint?.category?.metrics.packageSize)}</span>
+                  <span class="text-fg text-sm">${bytesFormatter.format(datapoint?.category?.metrics?.packageSize ?? 0)}</span>
                 </div>
                 <div class="flex flex-row items-baseline gap-2">
                   <span class="text-fg-subtle">${$t('compare.facets.items.dependencies.label')}</span>
-                  <span class="text-fg text-sm">${datapoint?.category?.metrics.dependencies}</span>
+                  <span class="text-fg text-sm">${datapoint?.category?.metrics?.dependencies ?? 0}</span>
                 </div>
                 <div class="flex flex-row items-baseline gap-2">
                   <span class="text-fg-subtle">${$t('compare.facets.items.totalDependencies.label')}</span>
-                  <span class="text-fg text-sm">${datapoint?.category?.metrics.totalDependencies}</span>
+                  <span class="text-fg text-sm">${datapoint?.category?.metrics?.totalDependencies ?? 0}</span>
                 </div>
                 <div class="flex flex-row items-baseline gap-2">
                   <span class="text-fg-subtle">${$t('compare.facets.items.vulnerabilities.label')}</span>
-                  <span class="text-fg text-sm">${datapoint?.category?.metrics.vulnerabilities}</span>
+                  <span class="text-fg text-sm">${datapoint?.category?.metrics?.vulnerabilities ?? 0}</span>
                 </div>

app/components/Compare/FacetQuadrantChart.vue (1)

113-128: Consider explicit property assignment to avoid spread in map.

The static analyser flags spreading inside .map() as inefficient. Since PackageQuadrantPoint has a known shape, you could destructure and reassign explicitly. However, if the utility may add properties in future that the chart relies on at runtime, keeping the spread preserves forward compatibility.

♻️ Optional: explicit property assignment

 const dataset = computed<VueUiQuadrantDatasetItem[]>(() => {
-  return rawQuadrant.value.map((el: PackageQuadrantPoint) => {
-    return {
-      ...el,
-      fullname: el.name,
-      name: applyEllipsis(el.name, 20),
-      shape: 'circle',
-      color: isListedFramework(el.name) ? getFrameworkColor(el.name) : undefined,
-      series: [
-        {
-          name: applyEllipsis(el.name, 20),
-          x: el.x,
-          y: el.y,
-        },
-      ],
-    }
+  return rawQuadrant.value.map((el: PackageQuadrantPoint) => ({
+    x: el.x,
+    y: el.y,
+    quadrant: el.quadrant,
+    category: el.category,
+    fullname: el.name,
+    name: applyEllipsis(el.name, 20),
+    shape: 'circle' as const,
+    color: isListedFramework(el.name) ? getFrameworkColor(el.name) : undefined,
+    series: [{ name: applyEllipsis(el.name, 20), x: el.x, y: el.y }],
+  }))
-  })
 })